import React, { Component } from 'react'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

// 导入封装的 axios
import { API } from '../../../../utils/api.js'

import styles from './index.module.css'

// 处理标题高亮的状态
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false
}

// 选中值状态对象
const selectedValues = {
  area: ['area', 'null'],
  mode: ['null'],
  price: ['null'],
  more: []
}

// 获取到本地存储的城市信息
const { value } = JSON.parse(localStorage.getItem('hkzf_city'))

export default class Filter extends Component {
  state = {
    titleSelectedStatus, // 高亮的状态
    selectedValues, // 筛选条件的选中值
    openType: '', // 控制组件展示或隐藏的状态
    filtersData: []
  }

  componentDidMount() {
    this.body = document.body

    // 调用获取筛选条件的方法
    this.getFiltersData()
  }

  // 获取筛选条件的方法
  async getFiltersData() {
    const { data: res } = await API.get(`/houses/condition?id=${value}`)

    if (res.status !== 200) return

    this.setState({
      filtersData: res.body
    })
  }

  // 点击条件筛选栏标题，实现标题的高亮效果
  onTitleClick = (type) => {
    this.body.className = 'body-fixed'

    const { titleSelectedStatus, selectedValues } = this.state

    // 创建一个新的的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }

    // 使用 object.keys() 遍历标题选中状态对象
    // 判断是否是当前标题，没有是：高亮，不是：取消高亮
    Object.keys(titleSelectedStatus).forEach(item => {
      // 判断当前标题是否与传递的一致
      // 说明是点击的那一项
      if (item === type) {
        newTitleSelectedStatus[type] = true
        return
      }

      // 处理其他标题的与默认标题默认值是否一致
      const selectVal = selectedValues[item]

      // 只主要判断长度是否等于 2，虎扑这第一项是不是 area，如果不是 area 就是 subway 地铁
      if (item === 'area' && (selectVal.length !== 2 || selectVal[0] !== 'area')) {
        newTitleSelectedStatus[item] = true
      } else if (item === 'mode' && selectVal[0] !== 'null') {
        newTitleSelectedStatus[item] = true
      } else if (item === 'price' && selectVal[0] !== 'null') {
        newTitleSelectedStatus[item] = true
      } else if (item === 'more' && selectVal.length !== 0) {
        // 后续做筛选的时候在处理
        newTitleSelectedStatus[item] = true
      } else {
        newTitleSelectedStatus[item] = false
      }
    })

    console.log(newTitleSelectedStatus)

    console.log(type)
    this.setState({
      titleSelectedStatus: newTitleSelectedStatus,
      openType: type
    })
  }

  // 取消按钮和点击遮罩层隐藏筛选条件
  onCancel = (type) => {
    this.body.className = ''
    // 取到 高亮的状态 和 选中项
    const { titleSelectedStatus, selectedValues } = this.state

    // 创建一个新的的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }

    // 根据 type 值获取到选中的值
    const selectVal = selectedValues[type]

    // 只主要判断长度是否等于 2，虎扑这第一项是不是 area，如果不是 area 就是 subway 地铁
    if (type === 'area' && (selectVal.length !== 2 || selectVal[0] !== 'area')) {
      newTitleSelectedStatus[type] = true
    } else if (type === 'mode' && selectVal[0] !== 'null') {
      newTitleSelectedStatus[type] = true
    } else if (type === 'price' && selectVal[0] !== 'null') {
      newTitleSelectedStatus[type] = true
    } else if (type === 'more' && selectVal.length !== 0) {
      // 后续做筛选的时候在处理、
      newTitleSelectedStatus[type] = true
    } else {
      newTitleSelectedStatus[type] = false
    }

    this.setState({
      openType: '',
      titleSelectedStatus: newTitleSelectedStatus
    })
  }

  // 确定按钮的事件处理程序
  onSave = (type, value) => {
    this.body.className = ''
    // 获取到默认的高亮效果
    const { titleSelectedStatus, selectedValues } = this.state

    // 创建一个新的的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }
    const newSelectedValues = { ...selectedValues, [type]: value }

    // 获取到高亮的状态
    // 用户点击确定以后，最新的值
    const selectVal = value

    // 只主要判断长度是否等于 2，虎扑这第一项是不是 area，如果不是 area 就是 subway 地铁
    if (type === 'area' && (selectVal.length !== 2 || selectVal[0] !== 'area')) {
      newTitleSelectedStatus[type] = true
    } else if (type === 'mode' && selectVal[0] !== 'null') {
      newTitleSelectedStatus[type] = true
    } else if (type === 'price' && selectVal[0] !== 'null') {
      newTitleSelectedStatus[type] = true
    } else if (type === 'more' && selectVal.length !== 0) {
      // 后续做筛选的时候在处理、
      newTitleSelectedStatus[type] = true
    } else {
      newTitleSelectedStatus[type] = false
    }

    this.setState((state) => {
      return {
        openType: '',
        selectedValues: newSelectedValues,
        titleSelectedStatus: newTitleSelectedStatus
      }
    })

    // 根据筛选条件获取房屋列表数据--组装参数
    // 组装参数的对象
    const houstParams = {}

    // 将区域的参数从 newSelectedValues 获取到 area 参数
    const { area, mode, price, more } = newSelectedValues

    // 获取到 area 中的第一个参数，确认是区域还是地铁
    const areaKey = area[0]
    // 获取 area 数组中的最后一项(索引为2)，如果最后一项为 null，就获取第二项(索引为 1)
    let areaValue = 'null'
    if (area.length === 3) {
      areaValue = area[2] !== 'null' ? area[2] : area[1]
    }

    // 将 area 参数处理好以后需要添加到 houstParams 对象中
    houstParams[areaKey] = areaValue
    // 将方式添加到 houstParams 中
    houstParams.mode = mode[0]
    // 将价格添加到 houstParams 中
    houstParams.price = price[0]
    // 将筛选添加到 houstParams 中
    houstParams.more = more.join(',')

    this.props.onFilter(houstParams)
  }

  // 渲染 FilterPicker 组件
  renderFilterPicker() {
    const {
      openType,
      filtersData: { area, subway, rentType, price },
      selectedValues
    } = this.state

    if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
      return null
    }

    // 获取到当前选中的值
    const defaultValue = selectedValues[openType]
    console.log(defaultValue)

    let data = [] // 根据 openType 决定渲染的数据
    let cols = 3 // 选择器的列表

    switch (openType) {
      case 'area':
        data = [area, subway]
        cols = 3
        break
      case 'mode':
        data = rentType
        cols = 1
        break
      case 'price':
        data = price
        cols = 1
        break
      default:
        break
    }

    return (
      <FilterPicker
        key={openType}
        onCancel={this.onCancel}
        onSave={this.onSave}
        data={data}
        cols={cols}
        type={openType}
        defaultValue={defaultValue}
      />
    )
  }

  // 渲染 FilterMore 组件
  renderFilterMore() {
    const {
      openType,
      filtersData: { roomType, oriented, floor, characteristic },
      selectedValues
    } = this.state

    if (openType !== 'more') return null

    const data = {
      roomType, oriented, floor, characteristic
    }

    // 获取到选中以后的值
    const defaultValue = selectedValues.more

    return <FilterMore
      data={data}
      onCancel={this.onCancel}
      onSave={this.onSave}
      type={openType}
      defaultValue={defaultValue}
    />
  }

  render() {
    const { titleSelectedStatus, openType } = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {
          openType === 'area' || openType === 'mode' || openType === 'price' ? (
            <div className={styles.mask} />
          ) : null
        }

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle titleSelectedStatus={titleSelectedStatus} onClick={this.onTitleClick} />

          {/* 前三个菜单对应的内容： */}
          {this.renderFilterPicker()}

          {/* 最后一个菜单对应的内容： */}
          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}
